<!DOCTYPE html>
<!--基于bootstraptable完成增删改查-->
<html>
<head>
    <base href="<%=basePath%>">
    <title>apollo-platform</title>
    <meta charset="utf-8">

    <link href="../public/table/css/bootstrap.min.css" rel="stylesheet">
    <link href="../public/table/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <script src="../public/table/js/jquery.min.js"></script>
    <script src="../public/table/js/bootstrap.min.js"></script>
    <script src="../public/table/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../public/table/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

    <style>
        .update {
            color: #333;
            margin-right: 5px;
        }

        .remove {
            color: red;
            margin-left: 5px;
        }

        .alert {
            padding: 0 14px;
            margin-bottom: 0;
            display: inline-block;
        }
    </style>
    </head>
<body>

<div class="container">
    <h1>平台管理</h1>
    <p class="toolbar">
        <a class="create btn btn-default" href="javascript:">创建新项目</a>
        <span class="alert"></span>
    </p>
    <table id="table"
           data-show-refresh="true"
           data-show-columns="true"
           data-search="true"
           data-query-params="queryParams"
           data-toolbar=".toolbar">
        <thead>
        <tr>
            <th data-checkbox="true" data-maintain-selected="true" checkboxEnabled="true"></th>
            <th data-field="jobId">作业号</th>
            <th data-field="jobName">作业名称</th>
            <th data-field="jobLevel">作业优先级</th>
            <th data-field="jobServerName">作业执行名称</th>
            <th data-field="jobDesc">作业描述</th>
            <th data-field="isSubJob">是否有子作业</th>
            <th data-field="createTime">创建时间</th>
            <th data-field="action"
                data-align="center"
                data-formatter="actionFormatter"
                data-events="actionEvents">操作
            </th>
        </tr>
        </thead>
    </table>
</div>

<div id="modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span></button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <div class="input-group">
                    <span class="input-group-addon">序号</span>
                    <input class="form-control" type="text" name="id" id="id" disabled="disabled">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">作业号</span>
                    <input class="form-control" type="text" name="jobId" id="jobId">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">作业名称</span>
                    <input class="form-control" type="text" name="jobName" id="jobName">
                </div>
                <div class="input-group">

                    <span class="input-group-addon">作业优先级</span>
                    <input class="form-control" type="text" name="jobLevel" id="jobLevel">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">作业执行名称</span>
                    <input class="form-control" type="text" name="jobServerName" id="jobServerName">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">作业描述</span>
                    <input class="form-control" type="text" name="jobDesc" id="jobDesc">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">是否有子作业</span>
                    <input class="form-control" type="text" name="isSubJob" id="isSubJob">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">是否等待</span>
                    <input class="form-control" type="text" name="isWait" id="isWait">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">是否删除</span>
                    <input class="form-control" type="text" name="isDeleted" id="isDeleted">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">创建时间</span>
                    <input class="form-control" type="text" name="createTime" id="createTime">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">更新时间</span>
                    <input class="form-control" type="text" name="updateTime" id="updateTime">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">更新用户</span>
                    <input class="form-control" type="text" name="updateBy" id="updateBy">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary submit">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
var update=0;
var rowId;
    var $table = $('#table').bootstrapTable({
                url: "/scheduler/jobs",
                toolbar: '#toolbar', //工具按钮用哪个容器
                //striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页
                sortable: true, //是否启用排序
                sortOrder: "asc", //排序方式
                //queryParams: postQueryParams,//传递参数（*）
                //sidePagination: "server",      //分页方式：client客户端分页，server服务端分页（*）
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                strictSearch: true,
//              height: table_h, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度,设置了行高后编辑时标头宽度不会随着下面的行改变，且颜色也不会改变？？？？
                uniqueId: "id", //每一行的唯一标识，一般为主键列
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                paginationHAlign: "left",
                singleSelect: true,
                search: true,               //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
                //strictSearch: true,
                showColumns: true, //是否显示所有的列
                showRefresh: true, //是否显示刷新按钮
                clickToSelect: true, //是否启用点击选中行
                paginationPreText: "<<",
                paginationNextText: ">>"
            }),
            $modal = $('#modal').modal({show: false}),
            $alert = $('.alert').hide();

        // create event创建事件
        $('.create').click(function () {
            showModal($(this).text());
            update=2;
        });

    function queryParams(params) {
        return {};
    }

    function actionFormatter(value) {
        return [
            '<a class="update" href="javascript:" title="Update Item"><i class="glyphicon glyphicon-edit"></i></a>',
            '<a class="remove" href="javascript:" title="Delete Item"><i class="glyphicon glyphicon-remove-circle"></i></a>',
        ].join('');
    }

    // update and delete events
    window.actionEvents = {
        'click .update': function (e, value, row) {
            showModal($(this).attr('title'), row);
            rowId=row.id;
            update=1;
        },

        'click .remove': function (e, value, row) {
            if (confirm('Are you sure to delete this item?')) {
                $.ajax({
                    url: "/scheduler/jobs/"+ row.id,
                    type: 'delete',
                    success: function () {
                        $table.bootstrapTable('refresh');
                        showAlert('Delete item successful!', 'success');
                    },
                    error: function () {
                        showAlert('Delete item error!', 'danger');
                    }
                })
            }
        }
    };

    $(function () {
        $modal.find('.submit').click(function () {
            var row = {};
            $modal.find('input[name]').each(function () {
                row[$(this).attr('name')] = $(this).val();
            });

            if(update==2){
                url="/scheduler/jobs";
                type="post";
                alert(update);
            }
            else if(update==1){
                url="/scheduler/jobs/"+ rowId;
                type="put";
                alert(update);
            }
                $.ajax({
                    url: url,
                    type: type,
                    contentType: 'application/json',
                    data: JSON.stringify(row),
                    success: function () {
                        $modal.modal('hide');
                        $table.bootstrapTable('refresh');
                        showAlert(('创建') + ' item successful!', 'success');
                    },
                    error: function () {
                        $modal.modal('hide');
                        showAlert(('创建') + ' item error!', 'danger');
                    }
                });
        });
    });

    function showModal(title, row) {
        row = row || {
                    id: '',
                    state: 0
                }; // default row value
        $modal.data('id', row.code);
        $modal.find('.modal-title').text(title);
        for (var name in row) {
            $modal.find('input[name="' + name + '"]').val(row[name]);
        }
        $modal.modal('show');
    }

    //显示结果信息，3秒后关闭
    function showAlert(title, type) {
        $alert.attr('class', 'alert alert-' + type || 'success')
                .html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
        setTimeout(function () {
            $alert.hide();
        }, 3000);
    }
</script>
</body>
</html>
